<template>
    <div class="servicelist">
        <div class="myservice">
            <div class="service-icon" v-for="(item,index) in modelservice" :key="index">
                <!-- <router-link to="item.goto"> </router-link> -->
                <img :src="item.img" />
                <p>{{item.texts}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"servicelist",
        props:["modelservice"],
        data(){
            return{

            }
        }
    }
</script>

<style scoped>
    *{
        margin:0;
        padding:0;
    }
    .servicelist{
        width:6.9rem;
    }
    .myservice{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        overflow: hidden;
    }
    .service-icon{
        width:1.55rem;
        display:flex;
        flex-flow:column; 
        justify-content:center;
        overflow:hidden;
        margin-left:0.08rem;        		
        margin-right:0.08rem;
        margin-bottom:0.3rem;
    }
    .service-icon img{
        width:0.6rem;
        height:0.6rem;
        margin-left:0.45rem;
        margin-bottom:0.25rem;
        overflow:hidden;
    }
    .service-icon p{
    	text-align:center;
        font-size:0.1rem;
        color:rgb(37, 37, 37);
        overflow:hidden;
    }
</style>

